<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <link rel="stylesheet" href="../../css/jquery.json-viewer.css" media="all" />
    <style>
      body {
        background-color: #ffffff;
      }
      #logArea {
        font-size: 14px;
        white-space: pre-line;
      }
      h3 {
        font-weight: 700;
        padding: 15px 0;
      }
      pre {
        font-family: "Sans-serif";
        font-size: 16px;
      }
    </style>
    <div>
      <div id="logArea"></div>
      <div id="new-log">
        <div id="headerBox"></div>
        <h3>请求：</h3>
        <div id="requestBox"></div>
        <h3>响应：</h3>
        <div id="responseBox"></div>
        <h3>堆栈信息：</h3>
        <div id="stackBox">
          <pre></pre>
        </div>
      </div>
    </div>
  </head>
  <body>
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
    <script src="../../js/jquery.json-viewer.js" charset="utf-8"></script>
    <script>
      layui.use(["form"], function () {
        var $ = layui.jquery;
        var form = layui.form,
          layer = layui.layer;
        //获取父页面当前操作行的数据
        let curData = parent.getCurData();
        //显示日志detail
        var options = {
          headerOpt: {
            collapsed: true,
            withQuotes: true,
          },
          requestOpt: {
            collapsed: false,
            withQuotes: false,
            recursive_collapser: true,
          },
          responseOpt: {
            collapsed: false,
            withQuotes: false,
            recursive_collapser: true,
          },
        };

        if (curData.stack) {
          $("#logArea").hide();
          $("#headerBox").text(curData.headers);
          $("#requestBox").jsonViewer(JSON.parse(curData.request), options.requestOpt);
          $("#responseBox").jsonViewer(JSON.parse(curData.response), options.responseOpt);
          $("#stackBox pre").html(curData.stack);
        } else {
          $("#new-log").hide();
          $("#logArea").text(curData.detail);
        }
      });
    </script>
  </body>
</html>
